{% extends 'layout/base.html' %}
{% load static %}
{% block content %}

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4>所 有 全 自 动 抓 取</h4>
                    <ul class="card-actions">
                        <button type="button" id="startAutoSpider" class="btn btn-sm btn-warning"><i
                                class="mdi mdi-google-play"></i>点击开始
                        </button>
                        <li>

                        </li>
                        <li class="dropdown">
                            <button type="button" data-toggle="dropdown">更多 <span class="caret"></span></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span>
                                    通知</a></li>
                                <li><a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span>
                                    消息</a></li>
                                <li class="divider"></li>
                                <li><a tabindex="-1" href="javascript:void(0)">更新个人信息</a></li>
                            </ul>
                        </li>
                    </ul>
                    <!-- .card-actions -->
                </div>
                <div class="card-body">
                    <p id="spiderStatus"></p>
                    <div class="progress">
                        <div id="showStatus" class="progress-bar progress-bar-success progress-bar-striped"
                             role="progressbar"
                             aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                            <span class="sr-only"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- .col-sm-6 -->

        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4>手 动 导 入 微 信 公 众 号 文 章</h4>
                    <ul class="card-actions">
                        <li>
                            <button type="button" data-toggle="tooltip" title="" data-original-title="开始"><i
                                    class="mdi mdi-google-play"></i></button>
                        </li>
                        <li class="dropdown">
                            <button type="button" data-toggle="dropdown">更多 <span class="caret"></span></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span>
                                    通知</a></li>
                                <li><a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span>
                                    消息</a></li>
                                <li class="divider"></li>
                                <li><a tabindex="-1" href="javascript:void(0)">更新个人信息</a></li>
                            </ul>
                        </li>
                    </ul>
                    <!-- .card-actions -->
                </div>
                <div class="card-body">
                    <form action="" class="form-horizontal">

                        <div class="form-group">
                            <div class="col-sm-11">
                                <input type="text" class="form-control" id="articleLink" placeholder="请输入公众号文章链接">
                            </div>
                            <div class="col-lg-1">
                                <button type="submit" class="btn btn-primary">搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
        <!-- .col-sm-6 -->
    </div>
    <!-- .row -->
    <!-- End Cards with Actions -->

</div>

{% endblock %}
{% block js %}
<script>
    $(function () {
        $("#startAutoSpider").click(function () {
            $(this).attr('disabled', "disabled");
            $(this).text("正在抓取ing.....");
            $("#spiderStatus").text("正在爬取.....");
            // 向后台发起全自动抓取的请求
            spiderAuto();
            // checkStatus()
            // business logic...
        })
    });

    // 获取后端状态
    function checkStatus(link_num) {
        $.ajax({
            url: "{% url 'article:test' %}",
            type: "GET",
            success: function (result) {
                checkStatus(link_num);
                $("#spiderStatus").text("正在爬取.....:" + link_num.toString() + " / " + result.toString());
                var precent = parseFloat((1 - (result / link_num))*100);
                //if (precent < 1){
                //    precent = 1
                //}
                if (result === " 0") {
                    console.log("result",result);
                    // 说明redis中没有待爬去的url了 直接就可以退出 前端写入
                    $("#startAutoSpider").removeAttr("disabled");
                    $("#startAutoSpider").text("抓取成功");
                    console.log("抓取完成")

                }
                console.log("result为",result);
                console.log(precent);
                var widthTemp = precent.toString() + '%';
                $('#showStatus').css('width', widthTemp);
                $('#showStatus').text(widthTemp);

            }
        })
    }


    // 全自动抓取
    function spiderAuto() {
        $.ajax({
            url: "{% url 'article:auto_spider' %}",
            type: "GET",
            success: function (result) {
                console.log(result);
                if (result.err_code === 7) {
                    // 恢复前端的状态  提示cookies池为空
                    $("#startAutoSpider").removeAttr("disabled");
                    $("#startAutoSpider").text("开始抓取");
                    $("#spiderStatus").text(result.message);
                }
                if (result.status) {
                    // 爬取成功列表页 监控后端状态 调用监控函数
                    $("#spiderStatus").text("正在爬取.....    " + result.link_count.toString());
                    checkStatus(result.link_count);
                }
            }
        })

    }

</script>
{% endblock %}